<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://unpkg.com/lodash/lodash.min.js"></script>
    </head>
    
    <body>
        <ul id="app1">
            <li v-for="item in items">
                {{item.text}}
                <ol>
                    <li v-for="it in item.msg">
                        {{it.m_item}}
                    </li>
                </ol>
            </li>
        </ul>

        <div id="app2">
            <input 
                v-model="newTodoText"
                v-on:keyup.enter="addNewTodo"
                placeholder="press Enter to Add a todo"
            >
            <ul>
                <li
                    is="todo-item"
                    v-for="(todo,index) in todos"
                    v-bind:title="todo"
                    v-on:remove="todos.splice(index,1)"
                ></li>
            </ul>
        </div>

    <script>
        Vue.component('todo-item',{
            template:'\
                <li>\
                    {{title}}\
                    <button v-on:click="$emit(\'remove\')">x</button>\
                </li>\
            ',
            props:['title']
        });
        var vm1=new Vue({
            el:'#app1',
            data:{
                items:[
                    {
                        msg:[
                            {m_item:'aaa'},
                            {m_item:'bbb'}
                        ],
                        text:'111'
                    },
                    {
                        msg:[
                            {m_item:'ccc'},
                            {m_item:'ddd'}
                        ],
                        text:'222'
                    },
                ]
            }
        });

        var vm2=new Vue({
            el:'#app2',
            data:{
                newTodoText:'',
                todos:[
                    '洗碗',
                    '倒垃圾',
                    '剔草坪'
                ]
            },
            methods:{
                addNewTodo:function(){
                    this.todos.push(this.newTodoText);
                    this.newTodoText='';
                }
            }
        });


    </script>
    </body>
</html>